<template>
  <div>
    <div class="flex justify-between items-center h-12 ">
      <div class="space-x-1 ml-3">
        <n-button circle
                  secondary
                  v-for="_color in colors"
                  :style="{ background: _color }"
                  @click="() => color = _color">
        </n-button>
      </div>
      <div class="flex items-center w-32">
        <TextIcon icon="bx:brush" tip="线条粗细" :size="25"></TextIcon>
        <n-slider v-model:value="size" :step="1"/>
      </div>
      <div class="flex">
        <n-button text :disabled="!canUndo" @click="undo()">
          <TextIcon tip="撤销" icon="material-symbols:undo" :size="25"></TextIcon>
        </n-button>
        <n-button text :disabled="!canRedo" @click="redo()">
          <TextIcon tip="回退" icon="material-symbols:redo" :size="25"></TextIcon>
        </n-button>
        <n-button text @click="clear()">
          <TextIcon tip="清除" icon="ant-design:clear-outlined" :size="25"></TextIcon>
        </n-button>
      </div>
    </div>
    <div class="flex overflow-hidden">
      <div class="flex flex-col space-y-3 items-center p-3  ">
        <n-button text @click="mode = 'draw'">
          <TextIcon tip="画笔" icon="mdi:pen" :size="30"></TextIcon>
        </n-button>

        <n-button text @click="mode = 'line'">
          <TextIcon tip="画线" icon="uil:line-alt" :size="30"></TextIcon>
        </n-button>
        <n-button text   @click="mode = 'rectangle'">
          <TextIcon tip="矩形" icon="material-symbols:rectangle-outline" :size="30"></TextIcon>
        </n-button>
        <n-button text @click="mode = 'ellipse'">
          <TextIcon tip="画圆" icon="mdi:ellipse-outline" :size="30"></TextIcon>
        </n-button>
      </div>
      <svg
          ref="target"
          class="w-full h-screen -mt-24 bg-white"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {toRefs} from '@vueuse/core'
import {useDrauu} from '@vueuse/integrations/useDrauu'
import TextIcon from "@/components/pc/icon/TextIcon.vue";

const target = ref()
const colors = ref(['black', '#ef4444', '#22c55e', '#3b82f6'])
const {undo, redo, canUndo, canRedo, clear, brush} = useDrauu(target, {
  brush: {
    color: 'black',
    size: 3,
  },
})
const {mode, color, size} = toRefs(brush)
</script>


<style scoped>

</style>